<template>
  <div class="container" :style="'min-height: ' + docheight + 'px'">
    <div v-if="!showTimeOut && showCont">
      <div class="bannerImg">
        <img :src="shopInfo.shop_background_img+ossSrc" />
      </div>
      <div class="shopCont">
        <div class="shopMask">
          <div class="shopImg">
            <img :src="shopInfo.shop_logo+ossSrc" />
          </div>
          <div class="shopInfo">
            <div class="shopName">
              <div class="shopNameVal">{{ shopInfo.shop_name }}</div>
              <img v-if="is_shop==2" class="setBtn" @click="setFn" src="static/img/setIcon.png" />
              <!-- <div  class="setBtn iconfont icon-icon-bianji" @click="setFn"></div> -->
              <div v-if="is_shop==1" class="openShopBtn" @click="openShopFn">申请开店</div>
            </div>
            <div class="shopInfoUnder">
              <div class="desItem">粉丝：{{ shopInfo.fans_num }}</div>
              <div class="desItem">访客：{{ shopInfo.visitor }}</div>
            </div>
          </div>
        </div>
        <div class="shopDes">{{ shopInfo.shop_introduce }}</div>
      </div>
      <div class="carList" v-if="shopInfo.all_data">
        <div class="carItem">
          <div class="carName">累计收益</div>
          <div>{{ shopInfo.all_data.month_order_money }}</div>
        </div>
        <div class="carItem">
          <div class="carName">累计订单</div>
          <div>{{ shopInfo.all_data.month_order_num }}</div>
        </div>
        <div class="carItem">
          <div class="carName">本月收益</div>
          <div>{{ shopInfo.month_data.month_order_money }}</div>
        </div>
        <div class="carItem">
          <div class="carName">本月订单</div>
          <div>{{ shopInfo.month_data.month_order_num }}</div>
        </div>
      </div>
      <div class="listCont">
        <div :class="index==0?'noTop listItem':'listItem'" @click="listFn(item)" :key="index" v-for="(item,index) in listArr">
          <img :src="item.img+ossSrc" />
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
    <toast
      v-model="showToast"
      position="middle"
      width="50%"
      type="text"
      :time="1000"
      >{{ showText }}</toast
    >
    <footcpm v-if="is_shop==2"></footcpm>
    <getLoad v-if="!showCont"></getLoad>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
  </div>
</template>

<script>
import { Toast } from "vux";
import SaveBtn from "@/components/public/saveBtn.vue";
import subLoad from "@/components/public/subLoad.vue";
import getLoad from "@/components/public/getLoad";
import getTimeOut from "@/components/public/getTimeOut";
import nodata from "@/components/public/nodata";
import footcpm from "@/components/footcpm";
import { shopapi,is_shop } from "@/http/api";
import bus from "@/assets/evnetBus.js";

export default {
  components: { nodata, getTimeOut, getLoad, subLoad, Toast, SaveBtn, footcpm },
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      showLoad: false,
      showText: "",
      showToast: false,
      listArr:[
        {name:'优惠券',img:'static/img/coupon.png',url:'/couponSet'},
        {name:'设置中心',img:'static/img/listSet.png',url:'/vipSet'},
        {name:'余额充值设置',img:'static/img/yue.png',url:'/moneySet'},
        {name:'用户中心',img:'static/img/sort.png',url:'/sortMoney'},
        {name:'SVIP会员列表',img:'static/img/vip.png',url:'/menberUser'},
        {name:'会员充值记录',img:'static/img/money.png',url:'/record'},
      ],
      shopInfo:{
        month_data:{
          month_order_money:'9999.00',
          month_order_num:999,
        },
        all_data:{
          month_order_money:'9999.00',
          month_order_num:999,
        },
        fans_num:'999+',
        shop_background_img:'static/img/banner2.jpg',
        shop_introduce:'欢迎光临《私域云花店》！我们是梦幻花艺的巧匠，为您精心设计独特花束，让每个瞬间绽放绚烂。在这里，花朵不仅是美丽的存在，更是情感的表达者。让我们一同创造浪漫、温馨的花语瞬间，为您的生活添上芬芳的色彩。',
        shop_logo:'static/img/goods.png',
        shop_name:'私域云花店',
        visitor:'999+',
      },
      is_shop:1,
    };
  },
  props: {},
  methods: {
    getData() {
      let data = {}
      shopapi(data)
        .then(res => {
          if (res.data.code == 1) {
            this.shopInfo = res.data.data
          } else {
            this.showToast = true;
            this.showText = res.data.msg;
          }
          this.showCont = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    listFn(item){
      if(this.is_shop==2){
        this.$router.push({path:item.url})        
      }else{
        this.showToast = true;
        this.showText = '非商家账号,没有权限~'
      }
    },
    openShopFn(){
      this.$router.push({path:'/openShop'})
    },
    setFn(){
      if(this.is_shop==2){
        this.$router.push({path:'/shopSet'})
      }else{
        this.showToast = true;
        this.showText = '非商家账号,没有权限~'
      }
    },
    checkUser(){
      is_shop().then((res)=>{
        if (res.data.code == 1) {
          this.is_shop = res.data.data
          localStorage.setItem('is_shop', res.data.data)
          if(this.is_shop==2){
            this.getData()
          }else{
            this.showCont = true;
          }
        } else {
          this.showCont = true;
          this.showToast = true;
          this.showText = res.data.msg;
        }
      }).catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    }
  },
  mounted() {
  },
  created() {
    this.checkUser()
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  background-color: #f9f1f1;
  box-sizing: border-box;
  padding-bottom: 3.5rem;
  .bannerImg{
    width: 100%;
    font-size: 0;
    position: relative;
    // height: 20rem;
    overflow: hidden;
    img{
      width: 100%;
    }
  }
  .shopCont{
    width: 92%;
    box-sizing: border-box;
    margin: 0 auto;
    border-radius: 0.75rem;
    padding: 0.75rem 4%;
    position: relative;
    top:-2rem;
    background-color: #fff;
    // box-shadow: 0 0 10px #fddadb;
    
    .openBtn{
      color: #e95551;
      border: 1px solid #e95551;
      padding: 0.5rem 0;
      width: 100%;
      border-radius: 0.25rem;
      text-align: center;
    }
    .shopMask{
      width: 100%;
      background-color: #fff;
      display: flex;
      .shopImg{
        width: 2.5rem;
        height: 2.5rem;
        font-size: 0;
        border: 0.15rem solid #e95551;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 0.75rem;
        img{
          width: 100%;
        }
      }
      .shopInfo{
        width: 1rem;
        flex: 1;
        height: 2.8rem;
        box-sizing: border-box;
        display: flex;
        padding-top: 0.15rem;
        flex-direction: column;
        justify-content: space-around;
        position: relative;
        .shopName{
          font-size: 0.8rem;
          font-weight: bold;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .shopNameVal{
            flex: 1;
            width: 1rem;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin-right: 2.5rem;
          }
          .setBtn{
            height: 2rem;
            position: absolute;
            right: 0rem;
            top: 0rem;
          }
          .openShopBtn{
            padding: 0.25rem 1rem;
            font-size: 0.6rem;
            font-weight: normal;
            border: 1px solid #e95551;
            color: #e95551;
            border-radius: 0.25rem;
          }
        }
        .shopInfoUnder{
          color: #666;
          font-size: 0.6rem;
          display: flex;
          align-items: center;
          .desItem{
            margin-right: 0.75rem;
          }
        }
      }
    }
    .shopDes{
      width: 100%;
      font-size: 0.6rem;
      color: #666;
      margin-top: 0.75rem;
      padding-left: 3.5rem;
      box-sizing: border-box;
    }
  }
  .carList{
    width: 92%;
    margin: 0 auto;
    border-radius: 0.75rem;
    // padding: 0.75rem;
    // box-shadow: 0 0 10px #ebebeb;
    box-sizing: border-box;
    margin-top: -1rem;
    display: flex;
    text-align: center;
    flex-wrap: wrap;
    justify-content: space-between;
    .carItem{
      background-color: #fff;
      width: 48%;
      padding: 0.75rem 0;
      margin-bottom: 0.75rem;
      border-radius: 0.25rem;
      .carName{
        font-size: 0.7rem;
        font-weight: bold;
      }
    }
  }
  .listCont{
    width: 92%;
    background-color: #fff;
    margin: 0 auto;
    border-radius: 0.25rem;
    padding: 0 4%;
    box-sizing: border-box;
    .listItem{
      display: flex;
      padding: 0.5rem 0;
      box-sizing: border-box;
      align-items: center;
      border-top: 0.05rem solid #f9f3f3;
      img{
        height: 1.5rem;
        margin-right: 0.75rem;
      }
    }
    .noTop{
      border-top: none;
    }
  }
}
</style>
